<template>
	<view class="identityInfo">
		<view class="identityInfobox_upload">
			<view class="identity_l">
				温馨提示：
			</view>
			<view class="warn">
				拍照时请确保身份证边角拍摄完整，字迹清晰易识别，亮度均匀无反光，为提高识别率，建议将手机竖着，身份证平放在单色桌面上拍摄上传
			</view>
			<view class="identity_m">
				<view class="m-t" @tap="Uploadahead">
					<image v-if="image!==''" :src="image" mode=""></image>
					<image v-if="image===''" src="../../static/images/identity/zheng.png" mode=""></image>
					<image src="../../static/images/identity/zhengbtn.png" mode="" ></image>
				</view>
				<view class="m-t" @tap="Uploadreverse">
					<image v-if="image1!==''" :src="reverseimage" mode=""></image>
					<image v-if="image1===''" src="../../static/images/identity/fan.png" mode=""></image>
					<image src="../../static/images/identity/fanbtn.png" mode="" ></image>
				</view>
			</view>
		</view>
		<view class="identityInfobox_sure">
			请确认身份信息
		</view>
		<view class="identityInfobox_photo">
			<view class="">
				头像
			</view>
			<image v-if="cardInfo===''" src="../../static/images/identity/photo.png" mode=""></image>
			<image v-if="cardInfo!==''" :src="cardInfo.image_url" mode=""></image>
		</view>
		<view class="identityInfobox_name">
			<view class="">
				姓名
			</view>
			<view class="">
				{{cardInfo!==''?cardInfo.info.name:'自动识别'}}
			</view>
		</view>
		<view class="identityInfobox_name">
			<view class="">
				身份证号
			</view>
			<view class="">
				{{cardInfo!==''?cardInfo.info.number:'自动识别'}}
			</view>
		</view>
		<view class="identityInfobox_name">
			<view class="">
				有效期
			</view>
			<view class="">
				{{cardInfo1!==''?cardInfo1.info.timelimit:'自动识别'}}
			</view>
		</view>
		<!-- <view class="btn"> -->
		<view class="Submit" @tap="Submit">
			提交认证
		</view>
		<!-- </view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				aheadimage: '',
				reverseimage: '',
				image:'',
				image1:'',
				cardInfo:'',
				cardInfo1:'',
				type:'',
				cardtime:''
			}
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			//身份证解析
			getIdCardInfo(url){
				this.$api.getIdCardInfo({
					url:url
				}).then((res) => {
					if (res.data.code == 200) {
						if(this.type===1){
							console.log(res.data.dataMap)
							this.cardInfo = res.data.dataMap
							// if(this.userInfo.userInfo.cardNo===res.data.dataMap.info.number){
							// 	this.cardInfo = res.data.dataMap
							// }else{
							// 	uni.showToast({
							// 		title: '你提交的证件信息与本账户信息不符，请确认后重新上传',
							// 		duration: 3200,
							// 		icon: "none"
							// 	});
							// 	setTimeout(()=>{
							// 		this.image = ''
							// 	},3200)
							// }


						}else if(this.type===2){
							console.log(res.data.dataMap)
							this.cardInfo1 = res.data.dataMap
							this.cardtime = this.cardInfo1.info.timelimit.split('-')
							console.log(this.cardtime[0])
						}
					}
				})
			},
			//图片识别
			identify(filePath){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.uploadFile({
					url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
					filePath: filePath,
					name: 'file',
					header: {
						ContentType: "image/jpg"
					},
					formData: {
						'user': 'test'
					},
					success:(uploadFileRes)=> {
						let data = JSON.parse(uploadFileRes.data)
						if(this.type===1){
							this.image = data.dataMap
							this.getIdCardInfo(this.image)
						}else if(this.type===2){
							this.image1 = data.dataMap
							this.getIdCardInfo(this.image1)
						}
						uni.hideLoading()

					}
				});
			},
			//上传身份证正面
			Uploadahead() {
				this.type = 1//正面
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //相册、拍摄两者都有
					success: (res)=> {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						this.aheadimage = res.tempFilePaths[0]
						this.identify(res.tempFilePaths[0])
					}
				});
			},
			Uploadreverse() {
				this.type = 2//反面
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //相册、拍摄两者都有
					success: (res)=> {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						this.reverseimage = res.tempFilePaths[0]
						this.identify(res.tempFilePaths[0])
					}
				});
			},
			Submit(){
				console.log(1)
				if(this.cardInfo===''||this.cardInfo1===''){
						uni.showToast({
							title: '请重新上传图片',
							duration: 500,
							icon: "none"
						});
						if(this.image===''||this.image1==='',this.cardInfo.image_url===''||this.cardtime[0]===''||this.cardtime[1]===''||this.cardInfo.info.name===''||this.cardInfo.info.number===''){
							uni.showToast({
								title: '请重新上传图片',
								duration: 500,
								icon: "none"
							});
						}
				}else{
							this.$api.Submitidcard({
								idCardMain:this.image,
								idCardSide:this.image1,
								authImage:this.cardInfo.image_url,
								validStartTime:this.cardtime[0],
								validEndTime:this.cardtime[1],
								realName:this.cardInfo.info.name,
								cardNo:this.cardInfo.info.number

							}).then((res) => {
								if(res.data.code == 200){
									uni.showToast({
										title: '认证成功',
										duration: 500,
										icon: "none"
									});
									uni.$emit("carData", 1)
									uni.navigateBack(1)
								}else{
									uni.showToast({
										title: '认证失败，请重新上传图片',
										duration: 500,
										icon: "none"
									});
								}

								console.log(res)
							})
				}

			}
		}
	}
</script>

<style scoped>
	.warn{
		width: 690rpx;
		height: 100rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: bold;
		color: #FF7E51;
		line-height: 32rpx;
		margin-top: -17rpx;
	}
	.identityInfo {
		background-color: #f8f8f8;
	}

	.identityInfobox_upload {
		width: 750rpx;
		height: 515rpx;
		/* border:1px solid red; */
		background-color: #FFFFFF;
	}

	.identity_l {
		width: 680rpx;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
		line-height: 100rpx;
		margin: 0 auto;
	}

	.identity_m {
		width: 680rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.m-t {
		width: 324rpx;
		height: 280rpx;
	}

	.m-t>image:nth-child(1) {
		width: 324rpx;
		height: 220rpx;
	}

	.m-t>image:nth-child(2) {
		width: 324rpx;
		height: 60rpx;
		margin-top: -14rpx;
	}

	.identityInfobox_sure {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
		background-color: #FFFFFF;
		margin: 0rpx auto;
		padding: 0 30rpx 0 30rpx;
		margin-top: 20rpx;
		/* border:1px solid red; */
	}

	.identityInfobox_photo {
		width: 690rpx;
		height: 250rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 0 30rpx;
		margin-top: 4rpx;
	}

	.identityInfobox_photo>view {
		font-size: 30rpx;
		font-weight: 500;
		color: #1B1B20;
		line-height: 32rpx;
	}

	.identityInfobox_photo>image {
		width: 147rpx;
		height: 168rpx;
	}

	.identityInfobox_name {
		width: 690rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 0 30rpx;
		margin-top: 20rpx;
	}

	.identityInfobox_name>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: 500;
		color: #1B1B20;
	}

	.identityInfobox_name>view:nth-child(2) {
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
		line-height: 32rpx;
	}

	.Submit {
		width: 690rpx;
		height: 88rpx;
		background: #FF5551;
		border-radius: 44px;
		margin: 0rpx auto;
		margin-top: 60rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
</style>
